<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

const data = ref({
  站类型: '',
  所属区块: '',
  站库名称: '',

});

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    console.info('onConfirm');
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData  = modalApi.getData<Record<string, any>>();
        if (modalData) {
        data.value = { ...data.value, ...modalData };
      }
    }
  },
  title: 'Tube Modal',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>站类型:</strong> {{ data.站类型 }}</p>
        <p><strong>所属区块:</strong> {{ data.所属区块 }}</p>
        <p><strong>名称:</strong> {{ data.站库名称 }}</p>

      </div>
    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}
</style>
